<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
        <div class="title border-bottom-1px">当前城市</div>
        <div class="button-list">
          <div class="button">{{ city }}</div>
        </div>
      </div>
      <div class="area">
        <div class="title border-top-1px border-bottom-1px">热门城市</div>
        <div class="button-list fix">
          <div class="button" v-for="item of hotCities" :key="item.id" @click="hdCityClick(item.name)">
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="area all">
        <dl>
          <template v-for="(item, key) in cities">
            <dt class="title border-top-1px" :key="key" id="key" :ref="key">{{ key }}</dt>
            <dd
              v-for="childItem in item"
              :key="childItem.id"
              class="border-top-1px"
              @click="hdCityClick(childItem.name)"
            >
              {{ childItem.name }}
            </dd>
          </template>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'CityList',

  props: ['cities', 'hotCities'],

  data() {
    return {
      letter: '',
    }
  },

  mounted() {
    this.scroll = new Bscroll(this.$refs.wrapper, {
      probeType: 3,
      preventDefault: false,
      stopPropagation: true,
      observeDOM: true,
    })

    this.$bus.$on('hdGetLetter', (letter) => {
      this.scroll.scrollToElement(this.$refs[letter][0])
    })
  },

  computed: {
    ...mapState(['city']),
  },

  methods: {
    hdCityClick(city) {
      // this.$store.commit('changeCity', city)
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity']),
  },
}
</script>

<style lang="scss" scoped>
.list {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 1.58rem;
  overflow: hidden;
}
.title {
  line-height: 0.48rem;
  height: 0.48rem;
  background-color: #eee;
  padding-left: 0.2rem;
  color: #666;
  font-size: 0.26rem;
}
.button-list {
  padding: 0.1rem;
  display: flex;
  flex-wrap: wrap;
}
.fix {
  justify-content: space-between;
}
.button-list .button {
  width: 27%;
  text-align: center;
  padding: 0.1rem 0;
  margin: 0.1rem;
  border: 0.02rem solid #ccc;
  border-radius: 0.08rem;
}
.button-list.fix .button:last-child {
  justify-self: start;
}
.all dd {
  line-height: 0.76rem;
  padding-left: 0.2rem;
  &:last-child::after {
    border-bottom: 0 none;
  }
}
</style>
